<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

onShareAppMessage(wxShare(true))
onShareTimeline(wxShare(false))
onAddToFavorites(wxCollect())
// #endif

import { onUnmounted } from 'vue'

import { clear, result } from './data'
import { imagePath } from '@/libs/file-utils'
import { backToMain } from '@/libs/common'

const img_bg = imagePath('quiz/career/bg.jpg')
const img_title = imagePath('quiz/career/title.png')
const card_desc = imagePath('quiz/career/result/card-desc.png')

result.value ? onUnmounted(clear) : backToMain()
</script>

<template>
  <PageWrapper
    name="quiz-career-result"
    :pageStyle="{ backgroundImage: img_bg }"
  >
    <div
      class="title"
      :style="{ backgroundImage: img_title }"
    ></div>

    <div
      class="card-desc"
      :style="{ backgroundImage: card_desc }"
    >
      <div class="text">{{ result?.description }}</div>
    </div>
  </PageWrapper>
</template>

<style lang="less" scoped>
.title {
  width: 480rpx;
  height: 78rpx;

  margin: 40rpx auto 0;
}

.card-desc {
  width: 686rpx;
  height: 1132rpx;

  margin: 34rpx auto 0;

  box-sizing: border-box;
  padding: 32rpx;

  border-radius: 32rpx;
  box-shadow: 0 8rpx 8rpx 0 rgba(216, 106, 77, .44), 0 0 4rpx 2rpx #D86A4D;

  .text {
    width: 100%;
    height: 100%;

    box-sizing: border-box;
    padding-bottom: 20rpx;

    color: #6D3312;
    font-size: 40rpx;
    line-height: 64rpx;

    overflow: auto;
    touch-action: pan-y;
  }
}
</style>